<template>
	<view class="container">
		<!-- 费用信息 -->
		<view class="pay-info">
			<u-cell-group>
				<u-cell clickable title="医院" titleStyle="font-size: 28rpx;color: #B3BCCC;" value="翊博门诊">
					<template #icon>
						<view>
							<u-image width="60rpx" height="60rpx" src="/static/images/a35.png"></u-image>
						</view>
					</template>
				</u-cell>
				<u-cell clickable title="项目" titleStyle="font-size: 28rpx;color: #B3BCCC;" value="心脑血管">
					<template #icon>
						<view>
							<u-image width="60rpx" height="60rpx" src="/static/images/a36.png"></u-image>
						</view>
					</template>
				</u-cell>
				<u-cell clickable title="医生" titleStyle="font-size: 28rpx;color: #B3BCCC;" value="李医生">
					<template #icon>
						<view>
							<u-image width="60rpx" height="60rpx" src="/static/images/a37.png"></u-image>
						</view>
					</template>
				</u-cell>
				<u-cell clickable title="就诊日期" titleStyle="font-size: 28rpx;color: #B3BCCC;" value="2023-11-16   12:00-1:00">
					<template #icon>
						<view>
							<u-image width="60rpx" height="60rpx" src="/static/images/a29.png"></u-image>
						</view>
					</template>
				</u-cell>
				<u-cell clickable title="挂号费" titleStyle="font-size: 28rpx;color: #B3BCCC;" value="￥123">
					<template #icon>
						<view>
							<u-image width="60rpx" height="60rpx" src="/static/images/a29.png"></u-image>
						</view>
					</template>
				</u-cell>
				<u-cell clickable title="问诊方式" titleStyle="font-size: 28rpx;color: #B3BCCC;" value="门诊问诊">
					<template #icon>
						<view>
							<u-image width="60rpx" height="60rpx" src="/static/images/a38.png"></u-image>
						</view>
					</template>
				</u-cell>
				<u-cell :border="false" required isLink clickable title="就诊人" titleStyle="font-size: 28rpx;color: #B3BCCC;" value="请选择就诊人" @click="goVisitor">
					<template #icon>
						<view>
							<u-image width="60rpx" height="60rpx" src="/static/images/a30.png"></u-image>
						</view>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
		
		<view class="tip-box">
			温馨提示：就诊时 请扫院内二维码 进行签到，如错过就诊时间，请退号后重新预约。
		</view>
	</view>

	<view class="btn">
		<u-button throttleTime="1000" :customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle"
			color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="goPayment">确认预约</u-button>
	</view>
	
	<!-- 就诊人列表 -->
	<u-picker closeOnClickOverlay :show="show" :columns="columns" @cancel="show = false" @close="show = false" @confirm="show = false"></u-picker>
</template>

<script setup>
	const show = ref(false)
	const columns = reactive([
	  ['中国', '美国', '日本']
	]);
	// 下单
	const goPayment = () => {
		uni.navigateTo({
			url: '/mine/reservation/pay'
		})
	}
	// 跳转常用就诊人
	const goVisitor = () => {
		uni.navigateTo({
			url: '/mine/visitor/list?type=add'
		})
	}
	
</script>

<style scoped lang="scss">
	.container {
		position: relative;
		z-index: 19;
		padding: 60rpx 26rpx;
	}

	.pay-info {
		background: #FFFFFF;
		border-radius: 30rpx;
	}
	.price-box {
		color: #D67354;
	}
	
	.tip-box {
		margin-top: 40rpx;
		padding: 0 80rpx;
		font-size: 26rpx;
		color: #B3BCCC;
		line-height: 43rpx;
	}

	.btn {
		padding: 0 55rpx;
		width: 100%;
		position: fixed;
		left: 50%;
		bottom: 70rpx;
		transform: translateX(-50%);
		z-index: 9;
	}
</style>